<template>
  <div class='home'>
    <div class="home-left">
      <img class="pc-one" src="../assets/img/zhuti.png" alt="">
      <img class="pc-two" src="../assets/img/zuoqiu.png" alt="">
      <img class="pc-three" src="../assets/img/youiqiu.png" alt="">
      <img class="pc-four" src="../assets/img/wenzi.png" alt="">
    </div>
    <div class="home-right">
      <img class="yinhe" src="../assets/img/yinhe.png" alt="">
      <p class="message">
            银河电子竞技是由一群资深专业的电子竞技玩家研发的电竞竞猜平<br/>
        台。不但有顶尖的技术支持，还拥有令人惊叹的视觉界面及高效的<br/>
        用户体验。所以IM电竞竞猜品台能让您轻松上手，一目了然，轻松<br/>
        投注</p>
        <div class="msg">
          <img src="../assets/img/wangzhe.png" alt="">
          <img src="../assets/img/cs.png" alt="">
        </div>

        <div class="btn" @click="$router.push({path:'/game'})">进入游戏</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
    }
  },
  methods: {}
}
</script>
<style lang='less' scope>
.home{
  height: 92vh;
  width: 100%;
  background: url('../assets/img/dabeijing.png') no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  padding-top: 100px;
  >.home-left{
    width: 788px;
    height: 788px;
    position: relative;
    margin-right: 200px;
    .pc-one{
      width: 1100px;
      animation: up 1s ease 1s forwards;
      opacity: 0;
    }
    .pc-two{
      position: absolute;
      left: 160px;
      top: 180px;
      opacity: 0;
      animation: downUpAllRight 2s linear 1.5s infinite;
    }
    .pc-three{
      position: absolute;
      right: -180px;
      top: 460px;
      opacity: 0;
      animation: downUpAllLeft 3s linear 1.5s infinite; 
    }
    .pc-four{
      width: 400px;
      position: absolute;
      left: 370px;
      top: 610px;
      opacity: 0;
      animation: upWenzi 1s ease 2s forwards; 
      
    }
  }
  >.home-right{
    width: 750px;
    height: 600px;
    padding: 110px 0 0 40px;
    animation: right 1s ease 1.5s forwards;
    opacity: 0;
    .message{
      font-size: 16px;
      color: #A1B1B0;
      line-height: 40px;
      letter-spacing:1px;
      margin: 30px 0;
    }
    .msg{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 30px;
      >img{
         margin-right: 30px; 
      }
    }
    .btn{
      width: 223px;
      height: 93px;
      margin-left: -10px;
      background: url('../assets/img/anniu.png') no-repeat;
      text-align: center;
      line-height: 80px;
      font-size: 18px;
      color: #fff;
      cursor: pointer;
    }
  }
}

@keyframes up {
   0%{
       margin-top: 100px;
       opacity: 0;
   } 
   100%{
       margin-top: 0;
       opacity: 1;
   }
}
@keyframes downUpAllRight {
    0%{
        top:180px;
        opacity: 0.5;
    }
    25%{
        top:200px;
        opacity: 0.8;
    }
    50%{
        top:180px;
        opacity: 1;
    }
    75%{
        top:160px;
        opacity: 0.8;
    }
    100%{
        top:180px;
        opacity: 0.5;
    }
 }
 @keyframes downUpAllLeft {
    0%{
        top:460px;
        opacity: 0.5;
    }
    25%{
        top:480px;
        opacity: 0.8;
    }
    50%{
        top:460px;
        opacity: 1;
    }
    75%{
        top:440px;
        opacity: 0.8;
    }
    100%{
        top:460px;
        opacity: 0.5;
    }
 }
 @keyframes upWenzi {
    0%{
        margin-top: 100px;
        opacity: 0;
    } 
    100%{
        margin-top: 0;
        opacity: 1;
    }
 }
 @keyframes right {
    0%{
        padding-left: 300px;
        opacity: 0;
    } 
    100%{
        padding-left: 40px;
        opacity: 1;
    }
 }

</style>
